今天用這個陽春的版面來介紹版面、字體、圖示還有間距的設定。剛剛跟接案的客戶談完流程，也收了頭款，大家敲碗的話也可以來分享一下接案。

版面 layout

雖然我第一份工作是網頁設計師，但因為沒有手刻過網頁，其實一開始版面設定造成我很大的困惑。

大部分的網站都是將內容集中在中間，內容寬度大概是 1000 - 1300px 左右都有，比較主流的可能是 1100 - 1200px 。如果你有興趣的話，可以使用 devtool 檢查工具去看其他網站的配置，挺有意思的。

比較麻煩的是，遇到不規則的網頁會手足無措XD

比如說底下是最近為氣象局做的，如果真要切版的話，應該要用百分比來計算而非 px。不同的版面會有不同的配置模式，印度氣象局官網我應該會採用最典型的 1200px 。

因為工作還包括切版，所以這個設計真的是自己整自己XD

圖示 icon

icon的部分，這是很有趣的一塊，我將它做簡單的分類，這些icon都是從這個網站搜集的，有興趣可以參考一下。
https://www.flaticon.com/

間距 spacing

spacing 當初也一直困擾我，之前都是憑感覺做設計XD

這是從一個我很喜歡的 UI 設計師 medium 文章看到的，覺得受用無窮。用朋友親疏關係解釋，突然覺得莫名地親切好懂許多。
https://tessgadd.medium.com/?p=8754c365dfe5

字體 font

再來是字體。底下提供的為通用準則，但字體大小還是要根據不同網頁類型做決定。我通常會把不同的字體加在 character styles ，有些人會給他命名。

文字 12px 網頁中最小使用的字級
文字 14px
文字 16px 現今網頁常使用的字級大小
文字 18px 現今網頁常使用的字級大小
文字 20px
文字 24px 一般附標題使用之字級大小
文字 26px 一般附標題使用之字級大小
文字 30px
文字 36px 大標題可使用之字級大小
文字 48px
文字 60px

16px = 1rem（瀏覽器預設）

文字 12 px = 0.75 rem 最小的
文字 16 px = 1 - 1.2 rem 常用的
文字 24 px = 1.5 - 2 rem 附標題
文字 36 px = 2.25 - 2.5 rem 大標題
文字 48 px = 3 – 3.75rem 超大標題

工作區域

經過多個午休的努力，整個工作區域大概是長成這副德性，有點兒雜亂，但其實也頗像我真實的工作情境XD
如果有什麼好的工作區域配置也請告訴我吧。

印度氣象局

工作某項目

今天先這樣。下一篇還在難產，拜拜～